<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/common/layui/css/layui.css" media="all" />
</head>
<body>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">标题</div>
                    <div class="layui-card-body">
                        {{ csrf_field() }}
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>派警编号</th>
                                <th>地址</th>
                                <th>派警时间</th>
                                <th>接警负责人</th>
                                <th>接警时间</th>
                                <th>完成时间</th>
                                <th>完成状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(!empty($data))
                                @foreach($data as $v)
                                    <tr class="paijing" paijing_id="{{$v['id']}}" room_id="{{$v['room_id']}}" mark="0">
                                        <td>{{$v['num']}}</td>
                                        <td>{{$v['rname']}}</td>
                                        <td>{{date('Y-m-d H:i:s',$v['add_time'])}}</td>
                                        <td>{{$v['sname']}}</td>
                                        <td>{{date('Y-m-d H:i:s',$v['accept_time'])}}</td>
                                        <td>{{date('Y-m-d H:i:s',$v['update_time'])}}</td>
                                        <td>@if($v['status'] == 0) 未完成 @else 已完成 @endif</td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-size="sm">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>报警时间</th>
                                <th>设备编号</th>
                                <th>设备类型</th>
                                <th>报警类型</th>
                            </tr>
                            </thead>
                            <tbody id="info">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        <ul class="layui-timeline line">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/pc/layout/js/jquery.min.js"></script>
    <script type="text/javascript" src="/common/layui/layui.js"></script>
    <script type="text/javascript" src="/pc/info/js/socket.io.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['element', 'layer'], function(){
            var element = layui.element;
            var layer = layui.layer;

            //监听折叠
            element.on('collapse(test)', function(data){
                layer.msg('展开状态：'+ data.show);
            });
        });

        //点击派警列表改变标记
        $('.paijing').click(function () {
            $('.paijing').attr('mark',0);
            $(this).attr('mark',1);

            var paijing_id = $('.paijing[mark="1"]').attr('paijing_id');
            $.ajax({
                url:'/admin/paijing/line',
                type:'post',
                async:false,
                data:{
                    "_token": $("input[name=_token]").val(),
                    'id':paijing_id
                },
                dataType:'json',
                success:function (data) {
                    console.log(data)
                    var str = '';
                    for(var key in data){
                        str += '<li class="layui-timeline-item"> <i class="layui-icon layui-timeline-axis"></i> <div class="layui-timeline-content layui-text"> <h3 class="layui-timeline-title">'+key+'</h3><p>';
                            for(var i=0;i<data[key].length;i++){
                                str += data[key][i]+'<br>';
                            }
                        str += '</p> </div> </li>';
                    }
                    $('.line').empty();
                    $('.line').append(str)
                }
            });
        })

        //websocket
        var socket = io('http://af.iqykj.com:2120');
        uid="af";
        socket.on('connect',function(){
            socket.emit('login',uid);
        });
        // 接收信息
        socket.on('new_msg',function(msg){
            var rule = /&quot;/g;
            var str_json = msg.replace(rule,'"');
            var data = jQuery.parseJSON(str_json);
            console.log(data);
            var room_id = $('.paijing[mark="1"]').attr('room_id');
            var paijing_id = $('.paijing[mark="1"]').attr('paijing_id');
            if(data.room_id == room_id){
                $.ajax({
                    url:'/admin/paijing/fresh',
                    type:'post',
                    async:false,
                    data:{
                        "_token": $("input[name=_token]").val(),
                        'id':paijing_id
                    },
                    dataType:'json',
                    success:function (data) {
                        console.log(data)
                        var str = '';
                        for(var i=0;i<data.length;i++){
                            str += "<tr><td>"+getMyDate(data[i]['addTime']*1000)+"</td><td>"+data[i]['num']+"</td> <td>"+data[i]['type_name']+"</td> <td>"+data[i]['genre']+"</td> </tr>";
                        }
                        $('#info').empty();
                        $('#info').append(str)
                    }
                });
            }
        });
        function getMyDate(str){
            var oDate = new Date(str),
                oYear = oDate.getFullYear(),
                oMonth = oDate.getMonth()+1,
                oDay = oDate.getDate(),
                oHour = oDate.getHours(),
                oMin = oDate.getMinutes(),
                oSen = oDate.getSeconds(),
                oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
            return oTime;
        };
        //补0操作
        function getzf(num){
            if(parseInt(num) < 10){
                num = '0'+num;
            }
            return num;
        }
    </script>
</body>
</html>